<template>
  <a-row>
    <a-col :xs="24" :sm="24" :md="18">
      <div class="article-list">
        <infinite-scroll :busy="busy" @load-more="handleLoadMore">
          <div class="article-card" v-for="(item, index) in articleList" :key="index">
            <div class="article-card-header">
              <div class="title">
                <nuxt-link :to="{ name: 'article-id', params: { id: item._id } }">{{ item.name }}</nuxt-link>
              </div>
              <div class="time">更新于: {{item.updatedAt | dateTime('ymdhms')}}</div>
            </div>

            <a-row class="article-card-body">
              <a-col :xs="24" :sm="6">
                <img class="article-img" :src="item.banner" alt="">
              </a-col>
              <a-col :xs="24" :sm="18">
                <div class="article-text">{{item.preface}}</div>
              </a-col>
            </a-row>

            <div class="article-card-footer">
              <span class="continue-read">
                <nuxt-link :to="{ name: 'article-id', params: { id: item._id } }">继续阅读</nuxt-link>
              </span>
            </div>
          </div>
        </infinite-scroll>
      </div>
    </a-col>

    <a-col :xs="0" :sm="0" :md="6">
      <div class="article-sider">
        <a-anchor :bounds="0" :targetOffset="20">
          <div class="category-box">
            <div class="category-search">
              <a-input-search placeholder="搜索文章" style="width: 100%;" @search="onSearch"></a-input-search>
            </div>
    
            <div class="category-link">
              <div :class="['category-link-item', { 'is-active': currentCategoryId === category._id }]"
                   v-for="category in articleCategoryList"
                   :key="category._id"
                   @click="onCategoryClick(category)">{{category.name}}</div>
            </div>
          </div>
        </a-anchor>
        
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { IListPagination } from '@/models/list-pagination.model';
  import { IArticle } from '@/models/article.model';
  import { IArticleCategory } from '@/models/article-category.model';

  @Component
  export default class ArticlePage extends Vue {
    articleList: IArticle[] = [];
    articleCategoryList: IArticleCategory[] = [];
    isLoading: boolean = false;
    busy: boolean = true;
    currentCategoryId: string = '';

    private pageIndex: number = 1;
    private pageSize: number = 3;

    // 文章列表
    private getArticleList(options: { pageIndex: number }): void {
      this.isLoading = true;
      const params = {
        pageIndex: options.pageIndex,
        pageSize: this.pageSize,
        categoryId: this.currentCategoryId,
        isEnabled: 1,
      };
      
      if (params.pageIndex === 1) {
        this.articleList = [];
      }
      
      this.$axios.get<IListPagination<IArticle>>('/blog/article/list', { params }).then((result: any) => {
        this.articleList = [...this.articleList, ...result.items];
        this.pageIndex = result.pageIndex;
        this.busy = result.pageIndex >= result.pageCount;
        this.isLoading = false;
      });
    }
    
    // 文章分类列表
    private getArticleCategoryList(): void {
      this.$axios.get<IArticleCategory[]>('/blog/article-category/list', { params: { isEnabled: true } }).then((result: any) => {
        this.articleCategoryList = result;
        this.articleCategoryList.unshift({ _id: '', name: '全部' });
      });
    }

    handleLoadMore(): void {
      this.getArticleList({ pageIndex: ++this.pageIndex });
    }
  
    onSearch(): void {
    
    }
  
    onCategoryClick(category: IArticleCategory): void {
      if (category._id === this.currentCategoryId) return;
      this.currentCategoryId = category._id;
      this.getArticleList({ pageIndex: 1 });
    }

    private created(): void {
      this.getArticleCategoryList();
      this.getArticleList({ pageIndex: this.pageIndex });
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/design/colors";

  .article-sider {
    padding-left: 24px;
    
    & /deep/ .ant-anchor-wrapper {
      padding: 0;
    }
    
    .category-box {
      background-color: #fff;
      border-radius: 4px;
      
      .category-search {
        background-color: $color-bg-grey-dark;
        width: 100%;
        padding: 12px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      
      .category-link {
        padding: 4px 0;
      }
      
      .category-link-item {
        cursor: pointer;
        padding: 8px 12px;
        background-color: transparent;
        transition: all 0.3s;
        
        &:not(.is-active):hover {
          background-color: $color-bg-secondary;
          color: #fff;
          transition: all 0.3s;
        }
        
        &.is-active {
          background-color: $color-bg-secondary;
          color: #fff;
        }
      }
    }
  }

  .article-card {
    width: 100%;
    height: 300px;
    background-color: #fff;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 5px;
    animation-name: articleCardItem;
    animation-duration: 0.3s;
    animation-timing-function: linear;

    &:last-child {
      margin-bottom: 0;
    }

    .article-card-header {

    }

    .article-card-body {
      border-top: $border;
      border-bottom: $border;
      font-size: 13px;
      padding: 12px 0;
      margin: 12px 0;

      .article-img {
        width: 100%;
        max-height: 150px;
      }

      .article-text {
        padding: 0 24px;
      }
    }

    .article-card-footer {
      .continue-read {
        color: #47494E;
      }
    }
  }

  /* screen 大于等于 576px 小于 767px */
  @media screen and (max-width: 767px) {
    .article-list {
      padding: 0 12px;
    }
  }

  /* iphone */
  @media screen and (max-width: 575px) {
    .article-card {
      height: auto;

      .article-card-body {
        .article-img {
          width: 100%;
          max-height: unset;
        }

        .article-text {
          padding: 12px 0 0;
        }
      }
    }
  }

  @keyframes articleCardItem {
    from {
      opacity: 0;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
</style>
